<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <!-- 房产数量 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <real-estate-num-card
            :obj="rent1"
            :datas="data1"
            @toDetail="toDetail"
          >
            <div class="card-history real-estate" @click="viewHistory">
              历史统计
            </div>
          </real-estate-num-card>
        </div>
      </el-col>
      <!-- 授权数量 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <real-estate-num-card
            :obj="rent2"
            :datas="data2"
            @toDetail="toDetail"
          />
        </div>
      </el-col>
      <!-- 业主数量 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <owner-num-card />
        </div>
      </el-col>
      <!-- 出售房产数量 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <sold-num-card />
        </div>
      </el-col>
      <!-- 出租房产数量 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <rental-num-card />
        </div>
      </el-col>
      <!-- 房产空置数量 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <vacant-num-card :obj="rent3" :datas="data3" @toDetail="toDetail" />
        </div>
      </el-col>
      <!-- 房产类型 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <PropertyTtpe />
        </div>
      </el-col>
      <!-- 房产丢失数量 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <vacant-num-card :obj="rent4" :datas="data4" @toDetail="toDetail" />
        </div>
      </el-col>
      <!-- 分布城市 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-five tit="分布城市" :cityData="cityData"> </lase-five>
        </div>
      </el-col>
    </el-row>
    <myModal :obj="objHistory" @close="objHistory.show = false">
      <div class="line-chart__box">
        <line-chart />
      </div>
      <div slot="footBtn"></div>
    </myModal>
  </div>
</template>

<script>
import RealEstateNumCard from "./components/RealEstateNumCard";
import OwnerNumCard from "./components/OwnerNumCard";
import RentalNumCard from "./components/RentalNumCard";
import SoldNumCard from "./components/SoldNumCard";
import VacantNumCard from "./components/VacantNumCard";
import PropertyTtpe from "./components/PropertyType";
import LaseFive from "./components/laseFive";

import {
  houseNum,
  authNum,
  vacantNum,
  loseNum,
  distributCity,
} from "@/api/dashboard";
import { myTimeDian } from "@/utils/common";
import myModal from "@/components/Modal";
import LineChart from "./components/lineChart.vue";
require("echarts/theme/macarons"); // echarts theme

export default {
  components: {
    RealEstateNumCard,
    OwnerNumCard,
    SoldNumCard,
    RentalNumCard,
    VacantNumCard,
    PropertyTtpe,
    myModal,
    LineChart,
    LaseFive,
  },
  data() {
    return {
      rent1: {
        tit: "房产数量",
        one: "地址",
        two: "BD",
        three: "添加时间",
      },

      cityData: [],
      data1: {
        totalNum: 0,
        monthNum: 0,
        list: [],
      },
      rent2: {
        tit: "授权数量",
        one: "地址",
        two: "BD",
        three: "授权时间",
      },
      data2: {
        totalNum: 0,
        monthNum: 0,
        list: [],
      },
      rent3: {
        tit: "房产空置数量",
        tit1: "占出租房产数量的",
        one: "地址",
        two: "空置天数",
        three: "开始时间",
      },
      data3: {
        leaseTotalNum: 0,
        vacantTotalNum: 0,
        list: [],
      },
      rent4: {
        tit: "房产丢失数量",
        tit1: "占房产数量的",
        one: "地址",
        two: "运营",
        three: "转出时间",
      },
      data4: {
        leaseTotalNum: 0,
        vacantTotalNum: 0,
        list: [],
      },
      objHistory: {
        title: "每月新增房源统计",
        show: false,
        width: "700px",
      },
    };
  },
  created() {
    this.getHouseNum();
    this.getAuthNum();
    this.getVacantNum();
    this.getLoseNum();
    this.getCityNum();
  },
  methods: {
    async getCityNum() {
      var res = await distributCity();
      this.cityData = res.data;
    },
    async getHouseNum() {
      var res1 = await houseNum();
      if (res1.code !== 200) return;
      var list = res1.data.addressList;
      this.data1.list = list.map((item) => {
        return {
          id: item.id,
          address: item.address,
          two: item.bdName,
          three: myTimeDian({ createdTime: item.createdTime }),
        };
      });
      this.data1.totalNum = res1.data.totalNum;
      this.data1.monthNum = res1.data.monthNum;
    },
    async getAuthNum() {
      var res2 = await authNum();
      if (res2.code !== 200) return;
      var list = res2.data.addressList;
      this.data2.list = list.map((item) => {
        return {
          id: item.id,
          address: item.address,
          two: item.bdName,
          three: myTimeDian({ createdTime: item.createdTime }),
        };
      });
      this.data2.totalNum = res2.data.totalNum;
      this.data2.monthNum = res2.data.monthNum;
    },
    async getVacantNum() {
      var res3 = await vacantNum();
      if (res3.code !== 200) return;
      var list = res3.data.vacntHouseList;
      this.data3.list = list.map((item) => {
        return {
          id: item.id,
          address: item.address,
          two: item.vacantDays,
          three: myTimeDian({ createdTime: item.createdTime }),
        };
      });
      this.data3.leaseTotalNum = res3.data.leaseTotalNum;
      this.data3.vacantTotalNum = res3.data.vacantTotalNum;
    },
    async getLoseNum() {
      var res4 = await loseNum();
      if (res4.code !== 200) return;
      var list = res4.data.outHouseList;
      this.data4.list = list.map((item) => {
        return {
          id: item.id,
          address: item.address,
          two: item.bdName,
          three: myTimeDian({ createdTime: item.createdTime }),
        };
      });
      this.data4.leaseTotalNum = res4.data.totalNum;
      this.data4.vacantTotalNum = res4.data.outNum;
    },
    toDetail(id) {
      const routerURl = this.$router.resolve({
        path: "/house/pageDetail",
        query: { id: id },
      });
      window.open(routerURl.href, "_blank");
    },
    viewHistory() {
      this.objHistory.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.card-history {
  position: absolute;
  right: 20px;
  top: 116px;
}
.line-chart__box {
  // padding: 10px 20px;
}
</style>
